<template>
	<view class="replyLayout">
		<view class="outer">
			<view class="body">
				<comment-item></comment-item>
			</view>
			<view class="list">
				<view class="row" v-for="item in 5">
					<comment-item></comment-item>
				</view>
			</view>
			
			<view class="replyBar" @click="clickReply">
				<view class="out">
					<view class="left">发一条友好的评论吧</view>
					<view class="right">
						<uni-icons type="paperplane" size="26" color="#333"></uni-icons>
					</view>
				</view>
				<view class="safe-area-bottom" :style="{background:'#fff'}"></view>
			</view>
		</view>
	</view>
	
	<uni-popup type="bottom" ref="commentPopup">
		<comment-reply></comment-reply>
	</uni-popup>
</template>

<script setup>
import { ref } from 'vue';

const commentPopup = ref(null);
const clickReply = ()=>{
	commentPopup.value.open();
}
</script>

<style lang="scss" scoped>
.replyLayout{
	.body{
		padding:30rpx 0;
		border-bottom:12rpx solid #F7F7F7;
	}
	.list{
		.row{
			border-bottom:1px solid #F7F7F7;
		}
	}
	.replyBar{
		padding:30rpx;
		border-top: 2rpx solid #e4e4e4;
		background: #fff;
		.out{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.left{
				flex:1;
				height: 70rpx;
				background: #f7f7f7;
				border-radius: 70rpx;
				padding:0 20rpx;
				display: flex;
				align-items: center;
				color:#999;
				margin-right:30rpx;
			}
		}
	}
}
</style>
